In the field of computer graphics, especially as pertaining to dealing with computer graphics in an Internet setting or client-server setting, the representation of graphics (e.g., references to files or other objects containing the computer graphics) can take on many forms. For example, in one legacy form each image used in a page (e.g., a web page) can be individually referenced, and individually retrieved, and individually rendered on to the page. In situations where many images are used in a composited page, the access overhead pertaining to individual accesses for individual graphics for the page can become much larger than the accessed images themselves. Especially in a web or other client-server setting, such individual accesses can result in poor use of bandwidth, and can introduce latency that is observable by the user.
Some legacy techniques have attempted to ameliorate the aforementioned undesirable effects (e.g., poor use of bandwidth, rendering latency, etc.) by combining or grouping sets of images into a single image. In cases of combining or grouping sets of images into a single image, a single mention or use (e.g., a reference, a retrieval, a rendering operation, etc.) can incur only a single unit of overhead when accessing the combined or grouped sets of images. One particular form of grouping involves generation of sprites. In the field of computer graphics, a sprite is a single (larger) image formed by tiling multiple (smaller) images. In one form, a sprite, more specifically a two-dimensional tiling of related images, can form a series of images used to render an animation (e.g., an ordered succession of images).
Sprites are used in web design, and in some cases are referenced in HTML style sheets such as in a cascaded style sheet (CSS). Sprites are used in legacy web design as a way to improve access and rendering performance by combining numerous small images or icons into a larger image called a sprite sheet or tile set. Style sheets (e.g., CSS files) can include code, parameters and/or other constructions for selecting which icon to show on a rendered page.
Generating these sprited images, especially sprited images that are to be referenced in a cascaded style sheet, can be quite difficult, however. A naïve approach is to take a collection of original images and merely tile them in a non-overlapping manner so as to construct a new sprited image. A CSS file can contain a declaration of the location of the sprited images as well as a series of declarations (e.g., one declaration per original image) that describe the size and position of each image within the sprited image. Such declarations, for example, can be used to refer to the upper left corner of a series of rectangular address ranges (e.g., pixel addresses), which in turn can be used to render an animation formed by presenting a series of original images in an ordered succession.
Such a legacy approach suffers from a number of inefficiencies and other problems to be solved. For example: (1) even if a web page does not use one or more of the images, they are still included as part of the sprited image, thus making the size of the sprited image larger and increasing network resource consumption incurred by loading and processing the page; (2) in order to use the produced web page style sheet (e.g., including rules), modifications to the web page itself are often needed; (3) in some cases, the CSS generated by legacy approaches cannot be easily combined with other CSS declarations on the page (e.g., such as when a web page is to reconcile both non-sprited images as well as sprited images); and (4) legacy approaches fail to address the presentation of images on high-density screens that have a high pixel density (e.g., iPhone or MacBook displays).
What is needed is an approach to the collection, declaration and presentation of sprited images. Indeed, the problem to be solved is rooted in technological limitations of the legacy approaches. Improved techniques, in particular improved application of technology, are needed to address the problem of how to efficiently collect and declare a high density of images when using a web page style sheet in a web page setting. Techniques are needed to improve the application and efficacy of various technologies as compared with the legacy approaches.